<!--
 * @Descripttion: 医师管理
 * @version: 
 * @Author: 
 * @Date: 2022-04-25 16:34:55
 * @LastEditors: weidelong
 * @LastEditTime: 2022-05-10 16:18:35
-->
<template>
    <div class="userMage">
        <div class="search">
            <el-form :model="serchForm" :inline="true" class="demo-form-inline">
                <el-row :gutter="20" style="width:100%">
                    <el-col :span="6">
                        <el-form-item label="用户名称：">
                            <el-input v-model="serchForm.username" placeholder="请输入用户名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="手机号码：">
                            <el-input v-model="serchForm.phone" placeholder="请输入手机号码" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-button type="primary">查询</el-button>
                        <el-button >重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="table">
            <div style="margin-bottom:20px;">
                <el-button type="primary" @click="showAddDialog">新增医师</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%; height:88%;" min-height="250" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
                <el-table-column type="index" label="序号" width="100px" align="center" />
                <el-table-column prop="userName" label="名称" width="60px" />
                <el-table-column prop="sex" label="性别" align="center" />
                <el-table-column prop="title" label="职称" :formatter='formatterTitle' />
                <el-table-column prop="unit" show-overflow-tooltip label="单位" />
                <el-table-column prop="department" label="科室"  width="100px"/>
                <el-table-column prop="strengths" show-overflow-tooltip label="专长" width="260px"/>
                <el-table-column prop="phone" label="电话号码" />
                <el-table-column prop="addTime" label="创建时间" />
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button type="text"  @click="showEditUser(scope.row)">编辑</el-button>
                        <el-button type="text"  @click="delUser(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page" style="height:100px">
			<el-pagination background 
				layout="prev, pager, next"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:total="total"
				:page-size='10'
				:current-page="currentPage"
			/>
		</div>
		
        <!-- 新增 -->
        <el-dialog v-model="showAdd" title="新增账号" width="480px">
            <el-form ref="formadd" :model="form" :inline="true" class="addFrom" label-position="right" label-width="100px">
                <el-form-item label="名称：">
                    <el-input v-model="form.userName"></el-input>
                </el-form-item>
                <el-form-item label="职称：">
                    <el-select v-model="form.title" placeholder="请选择职称">
                        <el-option label="住院医师" value="0"></el-option>
                        <el-option label="主治医师" value="1"></el-option>
                        <el-option label="副主任医师" value="2"></el-option>
                        <el-option label="主任医师" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="科室：">
                    <el-input v-model="form.department"></el-input>
                </el-form-item>
                <el-form-item label="单位：">
                    <el-input v-model="form.unit"></el-input>
                </el-form-item>
                <el-form-item label="手机：">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="性别：">
                    <el-radio-group v-model="form.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="密码：">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="专长：">
                    <el-input type="textarea" v-model="form.strengths"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showAdd = false">取消</el-button>
                    <el-button type="primary" @click="showAddUser">确定</el-button>
                </span>
            </template>
        </el-dialog>
         <!-- 编辑 -->
        <el-dialog v-model="showEdit" title="编辑账号" width="480px">
            <el-form ref="formadd" :model="form" :inline="true" class="addFrom" label-position="right" label-width="100px">
                <el-form-item label="名称：">
                    <el-input v-model="form.userName"></el-input>
                </el-form-item>
                <el-form-item label="职称：">
                    <!-- <el-input v-model="form.title"></el-input> -->
                    <el-select v-model="form.title" placeholder="请选择职称">
                        <el-option label="住院医师" value="0"></el-option>
                        <el-option label="主治医师" value="1"></el-option>
                        <el-option label="副主任医师" value="2"></el-option>
                        <el-option label="主任医师" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="科室：">
                    <el-input v-model="form.department"></el-input>
                </el-form-item>
                <el-form-item label="单位：">
                    <el-input v-model="form.unit"></el-input>
                </el-form-item>
                <el-form-item label="手机：">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="性别：">
                    <el-radio-group v-model="form.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="密码：">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="专长：">
                    <el-input type="textarea" v-model="form.strengths"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showEdit = false">取消</el-button>
                    <el-button type="primary" @click="editSave">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
   
</template>

<script>
	import { addDoctor, getDoctorList, editDoctorMsg, deleteDoctor } from '../../request/api/userMage/doctorMage.js'
	import {getCurrentTime, get_endtime, format_date} from '../../utils/index.js'
	import { ElMessage, ElMessageBox } from 'element-plus'
	
    export default {
        name: 'UserList',
        data() {
            return {
                showAdd: false,
                showEdit: false,
                serchForm: {
                    userName: '',
                    phone: ''
                },
				currentPage: 1, // 当前页
				pageSize: 10, // 每页显示14条数据
				total: 0,
                tableData: [
                    // {
					// 	name: 'admin',
                    //     title: '副主任医师',
					// 	sex: '男',
                    //     department: '内科',
                    //     unit: '广西人医',
                    //     phone: '18752364562',
                    //     strengths: 'dadsadadasdadasdadadadadassssssssssssssssssssssssssssssssssssssdadadasdads',
                    //     addTime: 'No. 189, Grove St, Los Angeles',
                    // },
                ],
                form: {
                    userName: '',
                    title: '',
                    department: '',
                    unit: '',
                    phone: '',
                    sex: '',
                    password: '',
                },
                num: 0,
                loading: false
            }
        },
		created() {
			this.getUserLists()
		},
		mounted() {
		},
        methods: {
			// 获取医师列表
			getUserLists() {
                this.loading = true
				getDoctorList({
					currentPage: this.currentPage,
					pageSize: this.pageSize
				})
				.then(res => {
					if (res.data) {
					    if (res.data.code == 0) {
					        let list = res.data.doctorList
							this.tableData = list
							this.total = res.data.total
                            this.loading = false
					    }
					} else {
					    this.$message({
					        message: res.msg,
					        type: 'warning'
					    })
					}
				})
				.catch(err => {})
			},
			// 点击新增按钮
			showAddDialog() {
				this.showAdd = true
				for (let item in this.form) {
					this.form[item] = ''
				}
			},
			// 确认新增
            showAddUser(){
                this.showAdd = false
                this.loading = true
				this.form['id'] = this.$uid()
				this.form['addTime'] = getCurrentTime()
				addDoctor(this.form)
				.then(res => {
					if (res.data) {
					    if (res.data.code == 0) {
							this.$message({
							    message: "新增成功",
							    type: 'success'
							})
					        this.getUserLists()
                            this.loading = false
					    }
					} else {
					    this.$message({
					        message: res.msg,
					        type: 'warning'
					    })
					}
				})
				.catch(err => {})
            },
			// 点击编辑
            showEditUser(row){
                this.showEdit = true
				this.form['userName'] = row.userName
				this.form['title'] = row.title
				this.form['department'] = row.department
				this.form['unit'] = row.unit
				this.form['phone'] = row.phone
				this.form['sex'] = row.sex
				this.form['password'] = row.password
                this.form['strengths'] = row.strengths
				this.form['id'] = row.id
            },
			// 编辑完确认
			editSave() {
				this.showEdit = false
                this.form['addTime'] = getCurrentTime()
				editDoctorMsg(this.form)
				.then(res => {
					if (res.data) {
					    if (res.data.code == 0) {
							this.$message({
							    message: "修改成功",
							    type: 'success'
							})
					        this.getUserLists()
					    }
					} else {
					    this.$message({
					        message: res.msg,
					        type: 'warning'
					    })
					}
				})
				.catch(err => {})
			},
			// 删除
			delUser(row) {
				ElMessageBox.confirm(
				    '是否确认删除?',
				    'Warning',
				    {
				        confirmButtonText: '确定',
				        cancelButtonText: '取消',
				        type: 'warning',
				    }
				)
				.then(() => {
					deleteDoctor({id: row.id})
					.then(res => {
						if (res.data) {
						    if (res.data.code == 0) {
								ElMessage({
									type: 'success',
									message: '删除完成',
								})
						        this.getUserLists()
						    }
						} else {
						    this.$message({
						        message: res.msg,
						        type: 'warning'
						    })
						}
					})
					.catch(err => {})
				})
				.catch(() => {
					ElMessage({
						type: 'info',
						message: '删除取消',
					})
				})
				
			},
			handleSizeChange(val) {
				
			},
			handleCurrentChange(val) {
				this.currentPage = val
				this.getUserLists()
			},
            // 格式化职称
            formatterTitle(row) {
                switch(row.title) {
                    case '0': 
                        return '住院医师';
                    case '1': 
                        return '主治医师';
                    case '2': 
                        return '副主任医师';
                    case '3': 
                        return '主任医师';
                    default: 
                        return '无';
                }
            },
            // 比较时间是否为当天
			compare_time(time) {
                let today_end = get_endtime();
                let time_old = time;
                if (today_end == time_old) {
                    return 1
                } else {
                    return 0
                }
			}
        }
    }
</script>

<style lang="scss" scoped>
.userMage {
    width: 100%;
	height: 100%;
    background-color: #F1F5F9 !important;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.search {
		flex: 3;
        margin-bottom: 8px;
        overflow: hidden;
        background-color: #fff;
        border-radius: 4px;
		padding: 12px;
		min-height: 50px;
		max-height: 50px;
		.el-form {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 50px;
			.el-form-item {
				display: flex;
				--font-size: 14px;
				margin-bottom: 0px; 
			}
		}
	}
	.table {
		flex: 16;
		// border: 1px solid #e0e0e0;
		padding: 12px;
        border-radius: 4px;
        background-color: #fff;
	}
    .page {
		flex: 1;
		padding: 12px;
        background-color: #fff;
        box-sizing: border-box;
        .el-pagination {
           float: right;
        }
	}
}
.addFrom {
    width: 100%;
    .el-form-item {
        width: 95%;
        .el-select{
            width: 100%;
        }
    }
}
</style>
